<template>
  <div>
    <span>
      更新时间:
      <el-date-picker
        v-model="time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始"
        end-placeholder="结束"
        size="default"
      />
    </span>
    <span>
      用户状态:
      <el-select
        v-model="queryParam['status']"
        class="m-2"
        placeholder="Select"
      >
        <el-option
          v-for="item in infolist['status']"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </span>
    <span>
      用户类型:
      <el-select
        v-model="queryParam['type']"
        class="m-2"
        placeholder="Select"
      >
        <el-option
          v-for="item in infolist['type']"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </span>
    <el-button type="primary" @click="queryList()">查询</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <template v-for="(item, index) in columnList">
        <el-table-column
          :key="index"
          :prop="item.field"
          :label="item.title"
          :width="item.width"
        >
          <template slot-scope="scope">
            <span> {{ scope.row[item.field] | qxSelffilter(item.value) }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
// 优化下拉选项前
import * as DateUtil from "@/utils/DateUtil";
export default {
  name: "user_info",
  mounted() {
    // this.queryList()
  },
  data() {
    let _startTime = DateUtil.ToString(
      DateUtil.AddDays(new Date(), -7),
      "yyyy-MM-dd"
    );
    let _endTime = DateUtil.ToString(new Date(), "yyyy-MM-dd");
    return {
      // 时间选择器
      time: [_startTime, _endTime],
      // 下拉选择属性
      infoArray: [{ title: "用户状态", value: "status" }],
      // 下拉选项
      infolist: {
        status: [
          { label: "启用", value: "0" },
          { label: "禁用", value: "1" },
        ],
        type: [
        { label: "管理员", value: "1" },
        { label: "普通用户", value: "2" },
        ],
      },
      // 列表查询参数
      queryParam: {
        startTime: _startTime,
        endTime: DateUtil.ToString(
          DateUtil.AddDays(_endTime, +1),
          "yyyy-MM-dd"
        ),
      },
      // 列表数据
      tableData: [],
      // 列字段
      columnList: [
        { title: "编号", field: "id" },
        { title: "账号", field: "userName" },
        { title: "类型", field: "type", value: { enum: "user_type" } },
        { title: "状态", field: "status", value: { enum: "status" } },
        { title: "备注", field: "remark" },
        {
          title: "更新时间",
          field: "updateTime",
          value: { date: "MM-dd hh:mm:ss" },
        },
        {
          title: "创建时间",
          field: "createTime",
          value: { date: "MM-dd hh:mm:ss" },
        },
      ],
    };
  },
  watch: {
    time(val) {
      if (!val) {
        // 参数为空时清空数据
        this.queryParam.startTime = "";
        this.queryParam.endTime = "";
      }
      if (val && val.length > 0) {
        this.queryParam.startTime = DateUtil.ToString(val[0], "yyyy-MM-dd");
        this.queryParam.endTime = DateUtil.ToString(
          DateUtil.AddDays(val[1], +1),
          "yyyy-MM-dd"
        );
      }
    },
  },
  methods: {
    async queryList() {
      const result = await this.$api.user.queryList(this.queryParam);
      if (result.code == "100") {
        this.tableData = result.data.list;
      }
    },
  },
};
</script>
  
  <style lang="scss">
</style>
  